<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css"> 
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">
<script type="text/javascript" src="<?= base_url() ?>file/js/easyui/jquery.easyui.min.js"></script>

<!--dialog-->

<link rel="stylesheet" href="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/themes/ui-lightness/jquery.ui.all.css">
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/jquery-1.7.1.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/jquery.bgiframe-2.1.2.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.button.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.position.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.effects.core.js"></script>

<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<style>
	.ui-autocomplete
	{
		max-height: 100px;
		overflow-y: auto;
		
		overflow-x: hidden;
		padding-right: 20px;
	}
    
    .smalll{
        width:50%
    }

</style>

<?php
    #### tampilkan alert jika terdapat kesalahan dalam memasukkan data
	$msg = $this->session->flashdata('message');
    $salah = validation_errors();
    if($salah <> ""){
        echo'<div id="box-messages">
            <div class="messages">
                <div id="message-error" class="message message-error">
                    <div class="image">
                        <img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
                    </div>
                    <div class="text">
                        <h6>Terdapat kesalahan dalam memasukkan data:</h6>
						<br />
                        <span>'. validation_errors() .'</span>
                    </div>
                    <div class="dismiss">
                        <a href="#message-error"></a>
                    </div>
                </div>
            </div>
        </div>';
    }		
	else if($msg <> ""){
		echo'<div id="box-messages">
			<div class="messages">
				<div id="message-error" class="message message-error">
					<div class="image">
						<img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
					</div>
					<div class="text">
						<h6>'. $msg .'</h6>
					</div>
					<div class="dismiss">
						<a href="#message-error"></a>
					</div>
				</div>
			</div>
			</div>';
	}
?>


<script type="text/javascript">
var tempIccid = "";

$(document).ready(function() {
	//proses field salesRB
	$('div#salesRB').dialog({ 
		autoOpen: false,
		width: 300,
		height: 300,
		modal: true,
		buttons: {
			'Select': function() {
				$( '#ajaxLoadAni' ).fadeIn( 'slow' );
				$( this ).dialog( 'close' );
				$.ajax({
					type: 'POST',
					success: function( response ) {
						spChosen = "";
						len = document.f1.r1.length;
						if (document.f1.r1.value != null)
						{
							spChosen = document.f1.r1.value;
							//hasSalesId = true;
						}
						else if(len >= 1)
						{
							for (i = 0; i <len; i++) {
								if (document.f1.r1[i].checked) {
									spChosen = document.f1.r1[i].value;
								}
							}
						}
						$("#sales_person").val(spChosen);
						
						getSP();
						
					} //end success
				}); //end ajax()
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	})	
	$('#salesImg').click(function(){
		$('div#salesRB').dialog('open'); 
	});
	
	//proses field outletRB
	$('div#outletRB').dialog({ 
		autoOpen: false,
		width: 220,
		height: 300,
		modal: true,
		buttons: {
			'Select': function() {
				$( '#ajaxLoadAni' ).fadeIn( 'slow' );
				$( this ).dialog( 'close' );
				$.ajax({
					type: 'POST',
					success: function( response ) {
						onChosen = "";
						len = document.f2.r2.length;
						
						if (document.f2.r2.value != null)
						{
							onChosen = document.f2.r2.value;
						}
						else if(len >= 1)
						{
							for (i = 0; i <len; i++) {
								if (document.f2.r2[i].checked) {
									onChosen = document.f2.r2[i].value;
								}
							}
						}
						$("#outlet_name").val(onChosen);
                        //getSP();
                        //alert(getoutlet());
                       populateSalesItem(getoutlet());
					} //end success
				}); //end ajax()
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	});
	
	$('#outletImg').click(function(){
		$('div#outletRB').dialog('open'); 
	});
	
	//proses field pHO
	$('div#pHO').dialog({ 
		autoOpen: false,
		width: 600,
		height: 300,
		modal: true,
		buttons: {
		
			'Select': function() {
				$( '#ajaxLoadAni' ).fadeIn( 'slow' );
				$( this ).dialog( 'close' );
				
				$.ajax({
					type: 'POST',
					success: function( response ) {
						
						var val = "";
						var table = document.getElementById("tblPopupHO");
						
						for(i=1;i<=document.getElementById("hoTotal").value;i++)
						{
							var row = table.rows[i];
							if (row.cells[0] != null)
							{
								var chkbox = row.cells[0].childNodes[0];
								if(null != chkbox && true == chkbox.checked) {
										val += chkbox.value + ", ";
								}
							}	
						}
						$('#program_ho').val(val);
						
					} //end success
				}); //end ajax()
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	});	
	$('#hoImg').click(function(){
		if (cekHasSalesId() == false)
		{
			$('#program_ho').val("");
			return false;
		}
		$('div#pHO').dialog('open'); 
	});
	
	//proses field pCluster
	$('div#pCluster').dialog({ 
		autoOpen: false,
		width: 600,
		height: 300,
		modal: true,
		buttons: {
		
			'Select': function() {
				$( '#ajaxLoadAni' ).fadeIn( 'slow' );
				$( this ).dialog( 'close' );
				
				$.ajax({
					type: 'POST',
					success: function( response ) {
						
						var val = "";
						var table = document.getElementById("tblPopupCL");
						
						for(i=1;i<=document.getElementById("clTotal").value;i++)
						{
							var row = table.rows[i];
							if (row.cells[0] != null)
							{
								var chkbox = row.cells[0].childNodes[0];
								if(null != chkbox && true == chkbox.checked) {
									val += chkbox.value + ", ";
								}
							}	
						}
						$('#program_cluster').val(val);
						
					} //end success
				}); //end ajax()
										
			},
			'Cancel': function() {
				$( this ).dialog( 'close' );
			}
		},
	});	
	$('#clusterImg').click(function(){
		if (cekHasSalesId() == false)
		{
			$('#program_cluster').val("");
			return false;
		}
		$('div#pCluster').dialog('open'); 
	});
	
	
	$('.check_all_iccid').click(function(){
		$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
	});
	$('.check_all_ho').click(function(){
		$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
	});
	$('.check_all_cluster').click(function(){
		$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
	});
	
	
	//tambah row sesuai kebutuhan
	// Silakan kalau mau tekan "Enter"

	/*
	** Tambah item yang dijual sebanyak input dari quantity
	** Obsolet: Setelah select sales name, populate item yang telah discan dan belum terjual. 

	$("#quantity").keydown(function(event) {
	  	if ( event.which == 13 ) {
	     	event.preventDefault();

			if (cekHasSalesId() == false)
				return false;

			s1 = document.getElementById("quantity").value;

			for(jj=0;jj<s1;jj++)
			{
				add_tuple = "<tr align='center' id='new_tuple"+test+"' class='wide'>"+
					"<td><input type='checkbox'/></td>"+
					"<td><input type='text' style='text-align:left;' id='iccid_"+test+"' name='iccid[]' value='' size='30%' onkeyup='updateValue("+test+")' onfocus='getIccid("+test+")'/></td>"+				
					"<td><input type='text' style='text-align:left;' id='mdn_"+test+"' name='mdn[]' value=''  readonly='readonly' value=''/></td>"+				
					"<td><input type='text' style='text-align:left;' id='item_group_name_"+test+"' name='item_group_name[]' readonly='readonly' value=''/></td>"+
					"<td><input type='text' style='text-align:left;' id='item_name_"+test+"' name='item_name[]'  readonly='readonly' size='50%' value=''/></td>"+
					"<td><input type='text' style='text-align:right;' id='price_"+test+"' name='price[]' readonly='readonly' value=''/></td>"+
				"</tr>";
				$('#bodyTable').append(add_tuple);
				test++;
		   	}
		}
	});

	// Atau mau tekan tombol tambah juga bisa
	$('#quantityImg').click(function(){
		$('#quantity').keydown();		
	});
	
	$("#form").keypress(function(event) {
	  	if ( event.which == 13 ) {
	     	event.preventDefault();
	   	}
	});
	
	**
	*/

})
</script>

<!-- sales person radio button form -->
<div id="salesRB" title="Select Sales Person">
    <div>
        <form name="f1" action="" method="post">
			
			<?php foreach($salesID as $item){?>
				<!-- <input type = "radio" name = "r1" value = "<?php echo $item->user_id; ?>"><?php echo $item->getNikName; ?><br /> -->
				<input type = "radio" name = "r1" value = "<?php echo $item->getNikName; ?>"><?php echo $item->getNikName; ?><br />
			<?php }?>
        </form>
    </div>
</div>

<!-- outlet name radio button form-->
<div id="outletRB" title="Select Outlet">
    <div>
        <form name="f2" id="f2" action="" method="post">
			
        </form>
    </div>
</div>

<!-- ---------------------------------------------------------------------------------------------------------------------------------- -->

<div id="pHO" title="Select HO Program">
	<table id="tblPopupHO" width="100%" class="table-right-panel" >		
		
		 <thead>
			<tr align='center' class='tr-colour3'>
				<th style='width:5%'><input style='width:60%' class='check_all_ho' type='checkbox'/></th>
				<th style="width:15%">Program Id</th>
				<th>Caption</th>
			</tr>
		</thead>
		<tbody id='hoList'>
		</tbody>
		
	</table>
	
	
	<input name="hoTotal" id="hoTotal" type="hidden" value="">
</div>

<div id="pCluster" title="Select Cluster Program">
	<table id="tblPopupCL" width="100%" class="table-right-panel" >
		
		<thead>
			<tr align="center" class="tr-colour3">
				<th style="width:5%"><input style="width:60%" class="check_all_cluster" type="checkbox" /></th>			
				<th style="width:15%">Program Id</th>
				<th>Caption</th>
			</tr>
		</thead>
		<tbody id='clList'>
		</tbody>
		
	</table>
	<input name="clTotal" id="clTotal" type="hidden" value="">
</div>

<!--n-------------------------------------------------------------------------------------------------------------------------------- -->




<form name="extraForm" id="extraForm" method="post">
	<input type="hidden" id="ugId" name="ugId" value="">
	<input type="hidden" id="ugId" name="ugId" value="">
	
</form>

<?php
	$listSales = array();
	$ii=0;
	
	foreach($salesID as $item)
	{
		$listSales[$ii] = $item->user_id;
		$listUg[$ii] = $item->user_group_id;
		$ii++;
	}
	
?>

<form id="form" name="testform" action="<?=$_SERVER['PHP_SELF']?>" method="post">		
<div class="panel-wrap" style="height: auto">
	
	<div class="panel-header-div">Informasi Cluster</div>
    <div class="panel-body-div">
        <div class="left-panel-body">
            <h2><?=$ter_name?></h2>
        </div>
        
    </div>
</div>


<script type="text/javascript">
var test = 2;
var hasSalesId = false;
var tempUG;


function preHo(sid)
{
	$('#hoList').empty();
	
	var add_ho_tuple = "";
	var ii = 0;
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/sell_out/getProgram/"+sid+"/ho",
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
				add_ho_tuple = "<tr align='center' id='hoList' class='wide'>"+
									"<td style='border:solid #D0D0D0 1px;'><input name='Chk"+ii+"' id='Chk"+ii+"' type='checkbox' value='" + n['mvalue'] +"'/></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:10%;'>"+ n["mvalue"] +"</div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%;'>"+ n["mdisplay"] +"</div></td>"+
								"</tr>";		
		
				$('#hoList').append(add_ho_tuple);	
				ii++;
				$("#hoTotal").val(ii);
			});
			if (ii==0)
			{
				add_ho_tuple = "<h6>No Data</h6>";
				$('#hoList').append(add_ho_tuple);				
			}
		},
		error: function(data){
		}
	});	
}


function preCluster(sid)
{
	$('#clList').empty();
	
	var add_cl_tuple = "";
	var ii = 0;
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/sell_out/getProgram/"+sid+"/cluster",
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
				add_cl_tuple = "<tr align='center' id='clList' class='wide'>"+
									"<td style='border:solid #D0D0D0 1px;'><input name='Chk"+ii+"' id='Chk"+ii+"' type='checkbox' value='" + n['mvalue'] +"'/></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:10%;'>"+ n["mvalue"] +"</div></td>"+
									"<td style='text-align:left;font-size : 1.3em;border:solid #D0D0D0 1px;'><div style='margin-left:5%;'>"+ n["mdisplay"] +"</div></td>"+
								"</tr>";		
		
				$('#clList').append(add_cl_tuple);	
				ii++;
				$("#clTotal").val(ii);
			});
			if (ii==0)
			{
				add_cl_tuple = "<h6>No Data</h6>";
				$('#clList').append(add_cl_tuple);				
			}
		},
		error: function(data){
		}
	});	
	
}


function prepareOutlet(sid)
{	
	var add_rb = "";
	$('#f2').empty();
	var filled = false;	
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/sell_out/getOutletList/"+sid,
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
				add_rb = (n["channel_id"] != "") ? "<input type = 'radio'  name = 'r2' value ='"+ n["outlet_id"]+" | "+n["outlet_name"]+"'>"+ n["outlet_id"]+" | "+n["outlet_name"]+"<br />" : "<h6>No Data</h6>" ;
				$('#f2').append(add_rb);	
				filled = true;
			});
			if (filled == false)
			{
				add_rb = "<h6>No Data</h6>" ;
				$('#f2').append(add_rb);	
			}
		},
		error: function(data){
		}
	});
	
}

// Populate item that hasn't been sold 
// yaddisurahman@gmail.com -- May 17, 2012
function populateSalesItem(sid) {
	// sid -> sales ID
    //alert(sid);
    $('#bodyTable').empty();
	$.ajax({
		url 	 : "<?php echo base_url(); ?>index.php/sell_out/getItemList/"+sid,
		dataType : "json",
		success	 : function(data) {
			var x = 1;
			$.each(data, function(label, value) {
				// price = addCommas( value['getPrice'] );
				// parseFloat(price);
				add_tuple = "<tr align='center' id='new_tuple"+x+"' class='wide'>"+
					"<td><input type='checkbox' id='"+x+"' name='sell_item[]' value='"+value["iccid"]+"'/></td>"+
					"<td><input type='text' style='text-align:left;' id='iccid_"+x+"' name='iccid[]' readonly='readonly' value='"+value["iccid"]+" '/></td>"+				
					"<td><input type='text' style='text-align:left;' id='mdn_"+x+"' name='item_name[]' readonly='readonly' value='"+value["item_name"]+"'/></td>"+
					"<td><input type='text' style='text-align:left;' id='item_group_name_"+x+"' name='item_code[]' readonly='readonly' value='"+value["item_code"]+"'/></td>"+
					"<td><input type='text' style='text-align:left;' id='item_name_"+x+"' name='item_group_name[]'  readonly='readonly' size='50%' value='"+value["item_group_name"]+"'/></td>"+
					"</tr>";
				$('#bodyTable').append(add_tuple);
				x++;
			});
		},
		error    : function(data) {

		}
	});
}

// yaddisurahman@gmail.com -- May 17, 2012
function getSales() {
	var salesId = $("#sales_person").val().split(" ");
	return salesId[0];
}


function getoutlet() {
	var salesId = $("#outlet_name").val().split(" ");
	return salesId[0];
}

function cekHasSalesId(tempID)
{
	if (hasSalesId == false)
	{	
		alert("Please fill the proper Sales Person!");		
		$('#sales_person').val("");
		$("#"+tempID).val("");
		return false;
	}
}

function getSP()
{
	hasSalesId = false;
	tempUG = "";
	
	$('#outlet_name').val("");
	$('#program_ho').val("");
	$('#program_cluster').val("");
	$('#bodyTable').empty();
	
	// var tempSP = document.getElementById("sales_person").value;
	var tempSP = getSales();
	var lSales=<?=json_encode($listSales)?>;
	var lUg=<?=json_encode($listUg)?>;
	
	
	if(tempSP != "")
	{
		for(var ii=0; ii<lSales.length; ii++)
		{
			if (tempSP == lSales[ii])
			{
				hasSalesId = true;				
				tempUG = (lUg[ii] == 9) ? "ds" : "sfa" ;
				showNotif();
				ii=lSales.length;
			}
		}	
	}
}

function showNotif()
{
	if (hasSalesId == false)
	{
		alert("Wrong Sales Id!\nPlease fill the Sales Person Field correctly.");
		$("#sales_person").val("");
		return false;
	}
	else
	{
		// prepareOutlet(document.getElementById("sales_person").value);
		// preHo($('#sales_person').val());
		// preCluster($('#sales_person').val());
		populateSalesItem(getSales());
		prepareOutlet(getSales());
		
	}
	
}


function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + '.' + '$2');
	}
	return x1 + x2 + ",00";
}

//update field-field pada suatu row setelah field iccid diisi
// function updateValue(soide)
// {
// 	var iccid = null;
// 	var iccid = document.getElementById("iccid_"+soide).value;
// 	var flag = false;
	
// 	tempIccid = $("#iccid_"+soide).val();
	
// 	$.ajax({
// 		url: "<?php echo base_url(); ?>index.php/sell/load_sell/"+iccid,
// 		dataType:"json",
// 		success:function(data){
// 			$.each(data, function(i,n){
// 				$("#mdn_"+soide).val(n["mdn"]);
// 				$("#item_name_"+soide).val(n["item_name"]);
// 				$("#item_group_name_"+soide).val(n["item_group_name"]);
// 				$("#price_"+soide).val(addCommas(n["getPrice"]));
// 				flag = true;
// 			});	
// 		},
// 		error: function(data){	
// 		}
// 	});

// 	if (flag == false)
// 	{
// 		$("#item_name_"+soide).val("");
// 		$("#item_group_name_"+soide).val("");
// 		$("#price_"+soide).val("");	
// 	}
// }


//ambil daftar iccid untuk ditampilkan pada textbox autocomplete
function getIccid(varTest)
{	
	$("#iccid_"+varTest).autocomplete({
		source: function(request, response){
			$.post(
				// "<?php echo base_url(); ?>index.php/sell/getRelatedIccid/"+document.getElementById("sales_person").value+"/"+tempIccid, 
				"<?php echo base_url(); ?>index.php/sell_out/getRelatedIccid/"+getSales()+"/"+tempIccid, 
				{data:request.term}, 
				function(data){     
					response($.map(data, function(item) {
						return {
							label: item.iccid,
							value: item.iccid
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 5,
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValue(varTest);
		return false;
		}
	});
}

//delete row yang diceklis
function delete_checked(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		
		for(var i=1; i<rowCount; i++) {
			var row = table.rows[i];
			if (row.cells[0] != null)
			{
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}
			}
		}
	}catch(e) {
		alert(e);
	}
}

</script>
<script type="text/javascript">
	$(function() {
		$("#date").datepicker({ 
			dateFormat: 'yy-mm-dd',
			showOn: 'button',
			buttonImageOnly: true, 
			buttonImage: '<?= base_url() ?>file/js/easyui/themes/pepper-grinder/images/datebox_arrow.png' 
		});
		$("#date1").datepicker({ 
			dateFormat: 'yy-mm-dd',
			showOn: 'button',
			buttonImageOnly: true, 
			buttonImage: '<?= base_url() ?>file/js/easyui/themes/pepper-grinder/images/datebox_arrow.png' 
		});
	});
</script>

<div class="panel-wrap" style="height: auto">
	<div class="panel-header-div">Order Information</div>
    <div class="panel-body-div">
        <div class="child-panel-body">
			<div class="left-panel-body">
				<div class="form">
                        <div class="fields">
                                <div class="field" style="display: none;">
                                        <div class="label" style="margin-left:3%">
                                            <label for="date">Tanggal:</label>
                                        </div>
                                        <div class="input">
											<input class="smalll" type="text" id="date" name="sell_date" onclick="this.value='';" value=
											"<?php 
													print(Date("Y-m-d"));
											?>"/>
                                        </div>
                                </div>
                                <div class="field">
                                        <div class="label" style="margin-left:3%">
                                            <label for="date">Tanggal Konsinyasi:</label>
                                        </div>
                                        <div class="input">
											<input class="smalll" type="text" id="date1" name="kon_date" onclick="this.value='';" value=
											"<?php 
													print(Date("Y-m-d"));
											?>"/>
                                        </div>
                                </div>
                                <div class="field">
                                        <div class="label" style="margin-left:3%">
                                                <label for="sales_person">Nama Sales:</label>
                                        </div>
                                        <div class="input">
											<input type="text" id="sales_person" name="sales_person" onkeyup="getSP();" class="smalll" />										
											<a><img id="salesImg" height="20px" style="margin-left:1%;" src="<?= base_url() ?>file/js/easyui/themes/icons/search.png" /></a>												
                                        </div>
                                </div>
								<div class="field">
                                        <div class="label" style="margin-left:3%">
                                                <label for="outlet_name">Nama Outlet:</label>
                                        </div>
                                        <div class="input">
											<input type="text" id="outlet_name" name="outlet_name" onkeyup="getSP();" class="smalll" />
											<a><img id="outletImg" height="20px" style="margin-left:1%;" src="<?= base_url() ?>file/js/easyui/themes/icons/search.png" /></a>
                                        </div>
                                </div>
                        </div>
                </div>
			</div>
		</div>
	
    <div class="child-panel-body" style="margin-top: 10%;">	
            <table id="table-updateable" class="table-right-panel" width="92%" style="margin-left: 19px;">
                <thead>
					<tr align="center" class="tr-colour3">
 						<th style="width:3%"><input style="width:60%" class="check_all_iccid" type="checkbox" /></th>
						<th>ICCID</th>
						<th>Item Name</th>
						<th>Item Code</th>
						<th>Item Group</th>
					</tr>
				</thead>
				<tbody id="bodyTable">
				</tbody>
				
                
            </table><br />
            <div class="form">
                        <div class="fields">
                                <div class="summary"> 
                                </div>
                                
                                <div class="field"></div>
                                
                                        <div class="field" style="border-bottom: none;">
                                        
                    				        <!--<div class="label" style="margin-left:1%;width: 10px;" >-->
                                            <div style="float: left;width: 8%;" >
                                                                    <label>Remark:</label>
                                            </div>
                                                             <div class="inputt" style="border-style: solid;">
                    									 
                    											<textarea id="remark" name="remark"  class="small" style="width: 82%;"  rows="5" > </textarea>										
                    																							
                                                            </div>
                                        </div>
                      </div>
            </div>
				
            <div class="summary"> 
            </div>
    </div>
    
   
        <div class="child-panel-body-2">
        
            <div class="buttons-2" style="margin: 0 auto">
                <input type="submit" value="Submit"/>
                <a href="javascript:history.go(0)"><input type="button" value="Revert" /></a>
            </div>
		</div>
		
    </div>
</div>
</form>

